<template>
  <div class="oa_table_max">
    <el-table
      ref="TableDom"
      v-bind="$attrs"
      v-on="$listeners"
      :align="align"
      type="selection"
      @selection-change="selectChange"
    >
      <el-table-column v-if="select" type="selection" width="55"></el-table-column>
      <slot name="frist"></slot>
      <template v-for="(item, index) in rowKey">
        <TableColumn :item="item" @linkItem="linkItem" :align="align" :key="item.key + index" />
      </template>
      <el-table-column v-if="showTableBut.length" label="操作">
        <template slot-scope="{ row }">
          <el-tooltip
            v-for="(item, index) in showTableBut"
            :key="index"
            effect="light"
            :content="item.name"
            placement="top"
          >
            <el-button type="text" @click="tableButClick(row, item.type)">
              <i :class="`iconfont ${item.icon}`"></i>
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
      <slot name="last"></slot>
    </el-table>
  </div>
</template>

<script>
import TableColumn from './TableColumn.vue'
export default {
  name: 'ActiveTable',
  props: {
    rowKey: {
      type: Array,
      default: () => []
    },
    showTableBut: {
      type: Array,
      default: () => []
    },
    align: {
      type: String,
      default: 'left'
    },
    // 是否显示左侧选择框
    select: {
      type: Boolean,
      default: true
    },
    // 是否单选
    radioSelect: {
      type: Boolean,
      default: true
    }
  },
  components: {
    TableColumn
  },
  data() {
    return {}
  },
  created() {},
  methods: {
    linkItem(row, key) {
      this.$emit('linkItem', { row, key })
    },
    // 用户勾选
    selectChange(e) {
      let result = e
      if (this.radioSelect && e.length > 1) {
        const [row] = e.slice(-1)
        result = [row]
        this.$refs.TableDom.clearSelection()
        this.$refs.TableDom.toggleRowSelection(row, true)
      }
      this.$emit('selectChange', result)
    },
    // 操作按钮点击
    tableButClick(row, type) {
      this.$emit('tableButClick', { row, type })
    }
  }
}
</script>
